<template>
	<view class="rebate-container">
		<!-- 记录列表 -->
		<scroll-view 
			scroll-y 
			class="rebate-list"
			@scrolltolower="handleLoadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="list-wrapper">
				<!-- 无数据展示 -->
				<view v-if="rebateList.length === 0 && !loading" class="empty-box">
					<image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
					<text class="empty-text">暂无补贴记录</text>
				</view>
				
				<!-- 记录列表 -->
				<template v-else>
					<view class="rebate-item" v-for="(item, index) in rebateList" :key="index">
						<view class="rebate-info">
							<view class="rebate-platform">
								<text class="platform">{{item.order_able_type_string}}</text>
								<text v-if="level_show" class="level">{{item.rebate_level_string}}</text>
							</view>
							<view class="rebate-amount" :class="{'negative': Number(item.rebate_amount) < 0}">
								¥{{item.rebate_amount}}
							</view>
						</view>
						<view class="rebate-detail">
							<view class="detail-item">
								<text class="label">处理状态：</text>
								<text class="value" :class="getStatusClass(item.settlement_status)">
									{{item.settlement_status_string}}
								</text>
							</view>
							<view class="detail-item">
								<text class="label">处理时间：</text>
								<text class="value">{{item.settlement_at}}</text>
							</view>
							<view v-if="item.order_able && item.order_able.order_no" class="detail-item">
								<text class="label">关联单号：</text>
								<text class="value">{{item.order_able.order_no}}</text>
							</view>
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view class="loading-more" v-if="loading">
						<view class="loading-icon"></view>
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 无更多数据 -->
					<view v-if="!hasMore && rebateList.length > 0" class="no-more">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			rebateList: [],
			page: 1,
			hasMore: true,
			loading: false,
			isRefreshing: false,
            level_show: false
		}
	},
	onShow() {
		this.getUserInfo()
		this.getRebateList()
	},
	methods: {
		// 返回上一页
		handleBack() {
			uni.navigateBack()
		},

        // 获取用户信息
        async getUserInfo() {
            try {
                const res = await request({
                    url: '/wechat/user/me'
                })

                if (res.code === 0 && res.data) {
                    this.level_show = !!res.data.invitation_code
                }
            } catch (err) {
                console.error('获取用户信息失败', err)
            }
        },
		
		// 获取补贴记录
		async getRebateList() {
			if (this.loading) return
			this.loading = true
			
			try {
				const res = await request({
					url: '/wechat/user/rebates',
					data: { page: this.page }
				})
				
				if (res.code === 0 && res.data) {
					if (this.page === 1) {
						this.rebateList = res.data.data
					} else {
						this.rebateList = [...this.rebateList, ...res.data.data]
					}
					this.hasMore = !!res.data.next_page_url
				}
			} catch (err) {
				console.error('获取补贴记录失败', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
				if (this.isRefreshing) {
					uni.stopPullDownRefresh()
					this.isRefreshing = false
				}
			}
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const statusMap = {
				0: 'status-normal',    // 正常
				1: 'status-pending',   // 待结算
				5: 'status-settling',  // 结算中
				9: 'status-settled',   // 已结算
				18: 'status-settled-extra', // 额外结算
				19: 'status-deduct'    // 扣除
			}
			return statusMap[status] || 'status-normal'
		},
		
		// 下拉刷新
		onRefresh() {
			this.isRefreshing = true
			this.page = 1
			this.rebateList = []
			this.hasMore = true
			this.getRebateList()
		},
		
		// 上拉加载更多
		handleLoadMore() {
			if (this.hasMore && !this.loading) {
				this.page++
				this.getRebateList()
			}
		}
	}
}
</script>

<style>
.rebate-container {
	min-height: 100vh;
	background-color: #f6f7fb;
}

.nav-back {
	padding: 0 30rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 40rpx;
	height: 40rpx;
}

.nav-placeholder {
	flex: 1;
	padding-right: 100rpx;
}

.rebate-list {
	height: 100vh;
	box-sizing: border-box;
}

.list-wrapper {
	padding: 20rpx;
}

.empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.rebate-item {
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
}

.rebate-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.rebate-platform {
	display: flex;
	align-items: center;
}

.platform {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-right: 16rpx;
}

.level {
	font-size: 24rpx;
	color: #666;
	background: #f0f0f0;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.rebate-amount {
	font-size: 36rpx;
	color: #07c160;
	font-weight: bold;
}

.rebate-amount.negative {
	color: #ff4d4f;
}

.rebate-detail {
	padding-top: 20rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 26rpx;
	color: #666;
}

.value {
	font-size: 26rpx;
	color: #333;
}

/* 状态样式 */
.value.status-normal {
	color: #333333;
	background-color: #f5f5f5;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.value.status-pending {
	color: #ff9900;
	background-color: #fff9e6;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.value.status-settling {
	color: #2b85ff;
	background-color: #f0f7ff;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.value.status-settled {
	color: #07c160;
	background-color: #f0fff0;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.value.status-settled-extra {
	color: #722ed1;
	background-color: #f9f0ff;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.value.status-deduct {
	color: #ff4d4f;
	background-color: #fff0f0;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.loading-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-icon {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	border: 4rpx solid #ddd;
	border-top-color: #007AFF;
	margin-right: 10rpx;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	color: #666;
}

.no-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 24rpx;
}
</style> 